<template>
  <div class="container">
    <!-- 导航栏 -->
    <van-nav-bar
      title="忘记密码"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <p class="title">忘记密码？</p>
    <!-- 忘记密码表单 -->
    <van-form @submit="onSubmit">
      <p class="toast">手机号</p>
      <van-field
        v-model="phonenumber"
        name="手机号"
        placeholder="请输入您的手机号码"
        :rules="rules.phonenumber"
      />
      <p class="toast">新密码</p>
      <van-field
        v-model="newpassword"
        type="newpassword"
        name="新密码"
        placeholder="请输入您的新密码"
        :rules="rules.newpassword"
      />
      <p class="toast">确认密码</p>
      <van-field
        v-model="repassword"
        type="repassword"
        name="确认新密码"
        placeholder="请再次确认密码"
        :rules="rules.newpassword"
      />
      <p class="toast">手机验证码</p>
      <van-field
        v-model="testcode"
        type="testcode"
        name="testcode"
        placeholder="请输入手机验证码"
        :rules="rules.testcode"
        class="code"
      >
        <template #button>
          <van-button
            size="small"
            square
            color="#71c9ce"
            type="default"
            @click.stop.prevent="sendcode"
          >发送验证码</van-button>
        </template>
      </van-field>
      <div style="margin: 16px;">
        <van-button
          round
          block
          native-type="submit"
          color="#71c9ce"
        >立即修改</van-button>
      </div>
    </van-form>
  </div>

</template>

<script>
function validator (val) {
  return !(val.length < 6)
}
export default {
  name: '',
  components: {

  },
  data () {
    return {
      phonenumber: '',
      repassword: '',
      newpassword: '',
      testcode: '',
      rules: {
        phonenumber: [{ required: true, message: '手机号不能为空' }, { pattern: /^1[3|5|7|9|8]\d{9}$/, message: '手机号格式错误' }],
        newpassword: [{ required: true, message: '密码不能为空' }, { validator, message: '密码长度过短' }],
        testcode: [
          { required: true, message: '验证码不能为空' },
          { pattern: /^\d{6}$/, message: '验证码格式错误' }
        ]
      }
    }
  },
  mounted () {

  },
  created () {

  },
  methods: {
    // 返回按钮  返回登录页面
    onClickLeft () {
      this.$router.back()
    },
    // 立即修改密码按钮
    onSubmit () { },
    // 发送验证码
    sendcode () {
      console.log(11)
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__arrow,
/deep/.van-nav-bar__text {
  color: white;
}
.title {
  font-size: 24px;
  color: #71c9ce;
  margin-left: 24px;
}
/deep/.van-form {
  margin: 0 24px;
}
.toast {
  font-size: 14px;
  color: #71c9ce;
}
/deep/.code.van-cell {
  padding-right: 0px;
}
</style>
